<script setup>
import { Plus as IconPlus } from '@element-plus/icons-vue'
import { reactive, ref, watch } from "vue"
import { findAllOfferApi, findAllStationApi, sendOfferApi } from "@/apis/recruitment"
import { dayjs, ElLoading, ElMessage } from "element-plus";

const sendOfferRequest = ref({
  email: '',
  name: '',
  startTime: null,
  stationId: null,
  type: null
})
const findAllOfferRequest = ref({
  id: null,
  status: null,
  name: null
})
const sendOfferDialogVisible = ref(false)
const sendOfferFormRef = ref()
const sendOfferFormRules = reactive({
  email: [{required: true, message: '请输入接收方邮箱！', trigger: 'blur'}],
  name: [{required: true, message: '请输入接收方姓名！', trigger: 'blur'}],
  startTime: [{required: true, message: '请选择开始日期！', trigger: 'blur'}],
  stationId: [{required: true, message: '请选择入职岗位！', trigger: 'blur'}],
  type: [{required: true, message: '请选择入职类型！', trigger: 'blur'}],
})

const offerList = ref([])
const stationList = ref([])
const tableLoading = ref(true)

const onOpenSendOfferDialog = () => {
  if (stationList.value === null) {
    findAllStationApi().then(({data}) => {
      stationList.value = data.dataList || []
    })
  }
  sendOfferDialogVisible.value = true
}

const onSubmitSendOffer = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        text: '',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      sendOfferRequest.value.startTime = parseInt(dayjs(sendOfferRequest.value.startTime).format('x'))
      sendOfferApi(sendOfferRequest.value).then((res) => {
        ElMessage.success('offer发放成功')
        sendOfferDialogVisible.value = false
        formEl.resetFields()
        findAllOffer()
      }).catch(() => {
        ElMessage.success('offer发放失败')
      }).finally(() => {
        loading.close()
      })
    }
  })
}

findAllStationApi().then(({data}) => {
  stationList.value = data.dataList || []
  findAllOffer()
})
const findAllOffer = () => {
  tableLoading.value = true
  findAllOfferApi(findAllOfferRequest.value).then(({data}) => {
    offerList.value = data || []
  }).finally(() => {
    tableLoading.value = false
  })
}

watch(() => findAllOfferRequest, (n, o) => {
  findAllOffer()
}, {deep: true})

const statusFormatter = (row) => {
  const status = row.status
  if (status === 0) {
    return '已发送'
  }
  if (status === 1) {
    return '已接受'
  }
  if (status === 2) {
    return '已拒绝'
  }
}

const typeFormatter = (row) => {
  const type = row.type
  if (type === 0) {
    return '实习'
  }
  if (type === 1) {
    return '正式'
  }
}

const startTimeFormatter = (row) => {
  const startTime = row.startTime
  return dayjs(startTime).format('YYYY-MM-DD')
}

const stationFormatter = (row) => {
  const stationId = row.stationId
  const index = stationList.value.findIndex((station) => station.id === stationId)
  return stationList.value[index].stationName
}

</script>

<template>
  <el-breadcrumb separator="/" style="margin-bottom: 20px">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>OFFER管理</el-breadcrumb-item>
  </el-breadcrumb>

  <el-form inline>
    <el-form-item label="ID：">
      <el-input v-model="findAllOfferRequest.id" placeholder="请输入OFFER ID" style="width: 200px;"
                clearable></el-input>
    </el-form-item>
    <el-form-item label="姓名：">
      <el-input v-model="findAllOfferRequest.name" placeholder="请输入OFFER姓名" style="width: 200px;"
                clearable></el-input>
    </el-form-item>
    <el-form-item label="状态：">
      <el-select v-model="findAllOfferRequest.status" style="width: 200px;" placeholder="请选择OFFER状态" clearable>
        <el-option label="未处理" :value="0"></el-option>
        <el-option label="已接受" :value="1"></el-option>
        <el-option label="已拒绝" :value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" :icon="IconPlus" @click="onOpenSendOfferDialog">OFFER发放</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="offerList" style="width: 100%; margin-top: 12px;" v-loading="tableLoading">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="stationId" label="岗位" :formatter="stationFormatter"></el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
    <el-table-column prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
    <el-table-column prop="type" label="类型" :formatter="typeFormatter"></el-table-column>
    <el-table-column prop="startTime" label="开始日期" :formatter="startTimeFormatter"></el-table-column>
  </el-table>

  <el-dialog v-model="sendOfferDialogVisible" title="OFFER发放" width="660px">
    <el-form
        inline
        label-position="left"
        label-width="auto"
        ref="sendOfferFormRef"
        :model="sendOfferRequest"
        :rules="sendOfferFormRules"
        status-icon>
      <el-form-item prop="name" label="姓名" style="margin-bottom: 32px;">
        <el-input v-model="sendOfferRequest.name" style="width: 200px;" placeholder="请输入接收方姓名"></el-input>
      </el-form-item>
      <el-form-item prop="stationId" label="岗位" style="margin-right: 0; margin-bottom: 32px;">
        <el-select v-model="sendOfferRequest.stationId" style="width: 200px;" placeholder="请选择入职岗位">
          <el-option v-for="station in stationList"
                     :key="station.id"
                     :label="station.stationName"
                     :value="station.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="email" label="邮箱" style="margin-bottom: 32px;">
        <el-input v-model="sendOfferRequest.email" style="width: 200px;" placeholder="请输入接收方邮箱"></el-input>
      </el-form-item>
      <el-form-item prop="type" label="类型" style="margin-right: 0; margin-bottom: 32px;">
        <el-select v-model="sendOfferRequest.type" style="width: 200px;" placeholder="请选择入职类型">
          <el-option label="正式" :value="1"></el-option>
          <el-option label="实习" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="startTime" label="开始日期">
        <el-date-picker v-model="sendOfferRequest.startTime" style="width: 200px;"
                        placeholder="请选择开始日期"></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="danger" size="small" @click="sendOfferDialogVisible = false">取消</el-button>
      <el-button type="primary" size="small" @click="onSubmitSendOffer(sendOfferFormRef)">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">

</style>